<template>
      <div>
        <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="450" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="患者" >
                 <el-autocomplete  class="width220" v-model="search.name" :fetch-suggestions="querySearchAsync" placeholder="请选择患者" @select="handleSelect"></el-autocomplete>
              </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd"/>
           </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
              <el-button type="primary" @click="cleanSearch">清空</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
         <el-button  type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
 <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="200"></el-table-column>
      <el-table-column prop="providerInfo.name" label="患者名称" sortable width="250"></el-table-column>
      <el-table-column prop="providerInfo.cardId" label="患者治疗号" sortable min-width="200" ></el-table-column>
      <el-table-column prop="registerNo" label="登记号"  width="150"  align="center"> </el-table-column>
      <el-table-column prop="startTime" label="治疗开始时间"  width="150"  align="center"> </el-table-column>
      <el-table-column prop="endTime" label="治疗结束时间"  width="150"  align="center"> </el-table-column>
      <el-table-column prop="totalTime" label="耗时" sortable width="120"></el-table-column>
      <el-table-column prop="mac" label="机器号" sortable width="120"></el-table-column>
      <el-table-column prop="bloodSpeed" label="全血流速(ml/min)" sortable width="120"></el-table-column>
      <el-table-column prop="bloodSpeed" label="循环血量(ml/min)" sortable width="120"></el-table-column>
      <el-table-column prop="returnBloodSpeed" label="返血流速(ml/min)" sortable width="120"></el-table-column>
     <el-table-column  prop="creatorName" label="创建人"  align="center"></el-table-column>
     <el-table-column  prop="createTime" label="创建时间"  align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  width="160">
        <template slot-scope="scope">
          <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
      <!-- 新增或者修改 -->
        <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px" :close-on-click-modal='false'>
            <el-tabs v-model="mainActiveName" @tab-click="detailTabs">
               <el-tab-pane label="治疗记录" name="1">
                   <el-form :model="dialog.formData"  :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm" :inline="true" >
                    <el-form-item label="患者姓名" prop="providerInfo.name" >
                        <el-autocomplete  class="width220" v-model="dialog.formData.providerInfo.name" :fetch-suggestions="queryRegAsync" placeholder="请选择患者" @select="handleSelectReg"></el-autocomplete> 
                    </el-form-item>
                    <el-form-item label="患者治疗号" prop="providerInfo.cardId">
                      <el-input v-model="dialog.formData.providerInfo.cardId" class="width220" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="登记号" prop="registerNo">
                      <el-input v-model="dialog.formData.registerNo" class="width220" disabled></el-input>
                    </el-form-item>
                      <el-form-item label="耗材检查" prop="hcCheck" >
                    <el-select v-model="dialog.formData.hcCheck"> 
                      <el-option label="未见异常" value="未见异常"  > </el-option>
                      <el-option label="异常" value="异常"  > </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="耗材用量" prop="hc" >
                      <el-input v-model="dialog.formData.hc" class="width220" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="耗材批号" prop="hcBatch" >
                        <el-input v-model="dialog.formData.hcBatch" class="width220" ></el-input>
                      </el-form-item>
                  <el-form-item label="抗凝剂用量" prop="kng" >
                      <el-input v-model="dialog.formData.kng" class="width220" type="number"></el-input>
                    </el-form-item>
                  <el-form-item label="抗凝剂用量" prop="kngBatch" >
                      <el-input v-model="dialog.formData.kngBatch" class="width220" ></el-input>
                    </el-form-item>
                    <el-form-item label="盐水用量" prop="ys" >
                      <el-input v-model="dialog.formData.ys" class="width220" type="number"></el-input>
                    </el-form-item>
                  <el-form-item label="盐水批号" prop="ysBatch" >
                      <el-input v-model="dialog.formData.ysBatch" class="width220" ></el-input>
                    </el-form-item>
                    <el-form-item label="葡萄糖酸钙片剂用量" prop="glucose" >
                      <el-input v-model="dialog.formData.glucose" class="width220" type="number"></el-input>
                    </el-form-item>
                  <el-form-item label="葡萄糖酸钙片剂批号" prop="glucoseBatch" >
                      <el-input v-model="dialog.formData.glucoseBatch" class="width220" ></el-input>
                    </el-form-item>
                    <el-form-item label="XJZH-I 机器" prop="mac" >
                    <el-select v-model="dialog.formData.mac"> 
                      <el-option label="一号机" value="一号机"  > </el-option>
                      <el-option label="二号机" value="二号机"  > </el-option>
                      <el-option label="三号机" value="三号机"  > </el-option>
                      <el-option label="四号机" value="四号机"  > </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="三氧机器" prop="macSanYang" >
                      <el-input v-model="dialog.formData.macSanYang" class="width220" ></el-input>
                    </el-form-item>
                    <el-form-item label="UBIO机器" prop="macUbio" >
                      <el-input v-model="dialog.formData.macUbio" class="width220" ></el-input>
                    </el-form-item>

                    <el-form-item label="治疗开始时间" prop="startTime" >
                      <el-date-picker v-model="dialog.formData.startTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"/>
                    </el-form-item>
                    <el-form-item label="治疗结束时间" prop="endTime" >
                      <el-date-picker v-model="dialog.formData.endTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"/>
                    </el-form-item>
                  <el-form-item label="抗凝剂比例" prop="kngRate" >
                      <el-input v-model="dialog.formData.kngRate" class="width220" type="number"></el-input>
                    </el-form-item>
                  <el-form-item label="穿刺部位" prop="puncturePart" >
                    <el-select v-model="dialog.formData.puncturePart"> 
                      <el-option label="左臂" value="左臂"  > </el-option>
                      <el-option label="右臂" value="右臂"  > </el-option>
                      <el-option label="双臂" value="双臂"  > </el-option>
                      <el-option label="其他详见备注" value="其他"  > </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否一针穿刺" prop="isFirstPuncture" >
                    <el-select v-model="dialog.formData.isFirstPuncture"> 
                      <el-option label="是" value="是"  > </el-option>
                      <el-option label="否" value="否"  > </el-option>
                    </el-select>
                  </el-form-item>
                    <el-form-item label="全血流速(ml/min)" prop="allBloodSpeed" >
                      <el-input v-model="dialog.formData.allBloodSpeed" class="width220" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="循环血量(ml)" prop="bloodSpeed" >
                      <el-input v-model="dialog.formData.bloodSpeed" class="width220" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="返血流速(ml/min)" prop="returnBloodSpeed" >
                      <el-input v-model="dialog.formData.returnBloodSpeed" class="width220" type="number"></el-input>
                    </el-form-item>
                  <el-form-item label="治疗结果" prop="result" >
                      <el-input v-model="dialog.formData.result" class="width220" type="textarea" ></el-input>
                    </el-form-item>
                  
                    <!-- 异常 -->
                  <el-form-item label="治疗过程中是否有不良反应" prop="isException" >
                    <el-select v-model="dialog.formData.isException"> 
                      <el-option label="是" :value=1  > </el-option>
                      <el-option label="否" :value=0  > </el-option>
                    </el-select>
                  </el-form-item>
                    <el-form-item label="不良反应症状" prop="exceptionSymptom" >
                      <el-input v-model="dialog.formData.exceptionSymptom" class="width220" type="textarea" ></el-input>
                    </el-form-item>
                    <el-form-item label="不良反应处理" prop="exceptionDeal" >
                      <el-input v-model="dialog.formData.exceptionDeal" class="width220" type="textarea" ></el-input>
                    </el-form-item>
                        <el-form-item label="恢复时间" prop="exceptionRecoverTime" >
                      <el-date-picker v-model="dialog.formData.exceptionRecoverTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"/>
                    </el-form-item>
                    <el-form-item label="创建人" prop="creatorName" v-if="dialog.type==='update'">
                      <el-input v-model="dialog.formData.creatorName" disabled class="width220"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="createTime"  v-if="dialog.type==='update'">
                      <el-input v-model="dialog.formData.createTime" disabled class="width220"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark" >
                      <el-input v-model="dialog.formData.remark" class="width220" type="textarea" ></el-input>
                    </el-form-item>
                    <el-form-item  class="form-item-block text-center">
                      <el-button type="primary" @click="onSubmit()">确认</el-button>
                    </el-form-item>
                  </el-form>
               </el-tab-pane>
               <el-tab-pane label="临时医嘱" name="2">
                   <tempDoctorAdvice :providerId="dialog.formData.providerId"  :registerNo="dialog.formData.registerNo"   :displayInsert ="displayInsert" ref="tempDoctorAdvice"></tempDoctorAdvice>
               </el-tab-pane>
            </el-tabs>

     
      
    </el-dialog>
      </div>
</template>
<script>
 import api from 'plugins/axios/api.js';
 /* 临时医嘱 */
import tempDoctorAdvice from 'views/operationManage/components/inquiryRecordDetail/tempDoctorAdvice.vue';
export default {
    components:{
      tempDoctorAdvice
    },

    data (){
        return {
          displayInsert :'0',
           mainActiveName:'1',
           search:{
                  startTime:'',
                  endTime:'',
                  name:'',
                  providerId:'',
                  time:'',
                  },
            loading:false,
            tableList:[],
            pagination:{/**分页参数 */
                currentPage:1,
                pageSize:10,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                type:'',
                formData:{
                  providerInfo:{
                    name:'',
                    cardId:'',
                   }
                },
               
            },
            rules: {
           
            }
        }
    },
    created(){},
    mounted(){
    this.getTableList();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  watch: {
  },
  methods: {
    detailTabs(){
       let self = this;
      switch (self.mainActiveName) {
        case "1":
          break;
         case "2":
          self.$refs.tempDoctorAdvice.init();
          break;
        default:
          break;
      }
    },
    queryRegAsync(queryString, callback){
      api.getTodayRegister().then(res=>{
                  res.content.forEach(item=>{
                  item.value = item.providerNoName;
                  })
              callback(res.content);
       })
    },
    handleSelectReg(item){
      let self=this;
      self.dialog.formData.providerId=item.providerNo;
      self.dialog.formData.registerNo=item.registerNo;
       self.dialog.formData.providerInfo.name=item.providerNoName;
       self.dialog.formData.providerInfo.cardId=item.cardId;
    },
    cleanSearch(){
      let self =this;
      self.search={
                 startTime:'',
                  endTime:'',
                  name:'',
                  providerId:'',
                  time:'',
      }
    },
      querySearchAsync(queryString, callback){
        api.getProviderByKeyWord({keyWord:queryString?queryString:''}).then(res=>{
            res.content.forEach(item=>{
            item.value =  item.name;
            })
            callback(res.content);
        })
    },
    handleSelect(item){
      let self=this;
      self.search.providerId=item.id;
      self.search.name=item.name;
    },
     handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.getTableList();
    },
      getTableList(){
      let self = this;
         if(self.search.time.length>0){
           self.search.startTime=self.search.time[0];
           self.search.endTime=self.search.time[1];
         }
      let data={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        providerId:self.search.providerId,
        startTime:self.search.time[0],
        endTime:self.search.time[1],
      }
     
      api.getTreatmentRecord(data).then(res=>{
        self.tableList = res.content.records;
        self.pagination.currentPage=res.content.current;
        self.pagination.pageSize=res.content.size;
        self.pagination.total=res.content.total;
         
      })
      
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.getTableList();
    },
    searchBtn(){
        this.getTableList()
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type = type;
      self.dialog.isShow = true;
      switch(type){
        case 'insert':
          self.dialog.title = ''
          self.dialog.formData={
                  providerInfo:{
                    name:'',
                    cardId:''
                   }
           }
          break;
        case 'update':
          self.dialog.title = ''
          self.dialog.formData=JSON.parse(JSON.stringify(row));
          break; 
      }
    },
    onSubmit(){
     let self = this;
     self.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if(self.dialog.type==='insert'){
                api.insertTreatmentRecord(self.dialog.formData).then(res=>{
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
            })   
            }
            if(self.dialog.type==='update'){
                api.updateTreatmentRecord(self.dialog.formData).then(res=>{
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
               }) 
            }
          } else {
           this.$message({
                 message: '提交失败',
                 type: 'warning'
            });
            return false;
          }
        });
        
    },
    
  
  },
  
}
    
</script>
<style scoped>

</style>   